<template ref="transEvent">
  <el-row :gutter="10" class="hdpi">
    <el-button v-show="maphide"
      style="background: #2d476e;border: #2d476e;color:#fff;position: fixed;top:50px;right:50px;z-index: 1000000000;"
      @click="mapsmall()">
      小屏
    </el-button>
    <!-- <el-button size="mini" style="background: #2d476e;border: #2d476e;color:#fff;position: fixed;top:25px;left:20px;"
      @click="leftshow()">
      {{leftbool}}
    </el-button> -->
    <div :title="leftbool" :class="leftbool=='隐藏'? 'leftbool-left':'leftbool-right'" style="position: fixed;top:25px;left:20px;" @click="leftshow()"></div>
    <!-- <el-button size="mini" style="background: #2d476e;border: #2d476e;color:#fff;position: fixed;top:25px;right:20px;"
      @click="rightshow()">
      {{rightbool}}
    </el-button> -->
    <div :title="rightbool" :class="rightbool=='隐藏'? 'rightbool-left':'rightbool-right'" style="position: fixed;top:25px;right:20px;" @click="rightshow()"></div>
    <el-col :lg="5" :md="5" class="hidden-md-and-down" v-show="leftbool=='隐藏'">
      <div class="grid-content ">

        <el-col class="grid-back" style=" height:100%;   min-height: 260px">
        <ul class="hdpi-r-ul">
          <li style="padding-bottom:10px;font-size: 14px;font-weight: bold;text-align: right;">
            <span style="float:left;line-height:2">设备模板</span>
            <el-select size="mini" v-model="templateId" placeholder="设备模板" @change="tempChange()"  collapse-tags filterable style="width:120px;">
              <!-- <el-option label="所有"></el-option> -->
              <el-option v-for="item in templateList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </li>
           <li style="padding-bottom:10px;font-size: 14px;font-weight: bold;text-align: right;">
            <span style="float:left;line-height:2">
            <el-input size="mini" v-model="deviceName" placeholder="设备查询" auto-complete="off" style="width:120px;"></el-input>
             <el-input size="mini" v-model="deviceSn" placeholder="Sn查询" auto-complete="off" style="width:120px;"></el-input>
           </span>
            
           
          <el-button type="primary" @click="tempChange()" style="background: #2d476e;border: #2d476e;color:#fff;height:30px;padding:4px 20px">查询</el-button>
          </li>
          <li v-for="item in users"  @click="deviceitem(item)"><span class="hdpi-r-l"
              :title="item.triggerText">{{item.name}}</span></li>
        </ul>
        </el-col>

      </div>

    </el-col>
    <el-col :lg="{span: lr}" :md="{span: lr}" class="mapcontent">
   
      <div style="clear:both;"></div>
      <div class="grid-content  hdpi-map">
      <div class="hdpi-icons " :style="cnStyle" style="position: relative;margin-top:0;padding:0 2% 3% 0;width:98%;border:0;height:62%">
    <h2 style="text-align:center;color:#fff;font-size:24px;position: relative;"> 设备组态运行界面
      <!-- <el-button size="mini" :style="btStyle" style=""
      >
      {{btName}}
      
    </el-button> -->
                  <img v-if="btName=='全屏'" :style="btStyle" @click="toposhow()" src='../../assets/7822cd1bf42f33b20da48dbf6492222.png'>
                  <img v-else :style="btStyle" @click="toposhow()" src='../../assets/1593865994.png'>
    </h2>
        <template  class="hdpi-icons" >
              <div id="pballmap" @mouseenter="enter(index)" @mouseleave="leave()"  @click="rollImg" v-loading="maploading" :style="topoStyle"   style="    margin-left: 2%;overflow: hidden;position: relative;">
        <iframe :style="iframeStyle"   style="    background: #fff" frameborder="0"  :src="ifsrc1"></iframe>
           <!-- <div class="block" v-if="btName!='全屏'">
    <span class="demonstration">缩放</span>
    <el-slider v-model="value1" :min="50" :max="200" :format-tooltip="formatTooltip"></el-slider>
  </div> -->
              </div>
      


        </template>
      </div>
        <transition>
          <div class="hdpi-icons " v-if="hdpi_show" style="position: relative;height:35%">
            <div style="height:40px"></div>
            <i class="pb-icon icon-close icon-clear" @click="device_clear()"></i>
            <!-- <i class="el-icon-arrow-left icon-left" @click="deviceleft()"></i>
            <i class="el-icon-arrow-right icon-right" @click="deviceright()"></i> -->
            <div class="hdpi-c" style="margin-top: 20px" v-if="device_dis">
              <div class="clearfix">
                <div class="hdpi-txt-title">
                  <div style="font-size: 22px;padding-bottom: 5px;">{{device_dis.name}}</div>
                  <div>{{device_dis.deviceLocation.address}}</div>
                  <div>连接状态：{{device_dis.stateText}}</div>
                </div>

                <div class="hdpi-txt-r">
                  <ul class="clearfix">
                    <li>
                      <div @click="giveshow()" title="告警记录">
                        <!-- <i class="pb-icon icon-home3" style="background-size: auto;vertical-align: -8px;"></i> -->
                        告警记录
                      </div>
                    </li>
                    <li>
                      <div type="primary" title="历史数据" @click="historyshow()">
                        <!-- <i class="pb-icon icon-history" style="background-size: auto;vertical-align: -8px"></i> -->
                        历史数据
                      </div>
                    </li>
                    <li>
                      <div type="primary" title="设备详情" @click="deviceshow()">
                        <!-- <i class="pb-icon icon-home6" style="background-size: auto;vertical-align: -8px"></i> -->
                        设备详情
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="hdpi-txt clearfix">
                <div class="hdpi-txt-l">
                  <img :src="disimg?disimg:require('../../assets/79761007764060c4e63247c8f2a32ab.png')"
                    style="width:100%">
                </div>
                <div class="hdpi-txt-c">
                  <ul  class="clearfix" style="color:#fff">
                      <li>SN: {{device_dis.deviceSn}}</li>
                      <li>设备模板: {{device_dis.deviceTemplateName}}</li>
                    <!-- <li v-for="item in registerlist">
                      <div>
                        {{item.name}} :
                        <el-switch v-if="item.dataType==1" @change="scade(item)" v-model="item.registerVal"
                          active-value="1" inactive-value="0"
                          :disabled="item.writeRead==0||menubt.indexOf('/device/cmd')==-1">
                        </el-switch>


                        <span v-if="item.dataType!=1" style="font-size:14px;cursor: pointer;">
                          <span v-if='item.writeRead==0' title="不可写数据点">{{item.registerVal}}<span
                              v-if='item.unit'>({{item.unit}})</span></span>
                          <span v-if='item.writeRead!=0' @click="fromedit(item)">{{item.registerVal}}<span
                              v-if='item.unit'>({{item.unit}})</span></span>
                        </span>
                      </div>
                    </li> -->

                  </ul>
                  <!-- <div v-if="!reportshow">
                    <div style="color:#fff;line-height: 1.7;cursor: pointer;" v-for="item in givelistdis"
                      @click="giveedit(item)"><span
                        :title="item.triggerText">{{item.updateTime}}【{{item.state}}】{{item.deviceName}}:
                        {{item.triggerText}}</span></div>
                  </div> -->
                </div>

              </div>
            </div>
          </div>
        </transition>
        <!-- </el-carousel-item>
        </el-carousel> -->
      </div>
    </el-col>
    <el-col v-show="rightbool=='隐藏'" :lg="5" :md="5" class="hidden-md-and-down">
          <div class="grid-back" style="min-height: 260px;height:60%">
                <div style="padding-bottom:10px;font-size: 14px;font-weight: bold;text-align: left;color:#fff;text-indent:10px">
            <span >实时数据</span>
            <!-- <el-select size="mini" v-model="level" placeholder="告警等级" @change="alarmget()" style="width:120px;">
              <el-option label="所有"></el-option>
              <el-option v-for="item in alaem_grade" :key="item.value" :label="item.remark" :value="item.value">
              </el-option>
            </el-select> -->
          </div>
        <ul class="hdpi-r-ul" style="height:90%">
        
          <li v-for="item in registerlist">
                      <div>
                        {{item.name}} :
                        <el-switch v-if="item.dataType==1" @change="scade(item)" v-model="item.registerVal"
                          active-value="1" inactive-value="0"
                          :disabled="item.writeRead==0||menubt.indexOf('/device/cmd')==-1">
                        </el-switch>


                        <span v-if="item.dataType!=1" style="font-size:14px;cursor: pointer;">
                          <span v-if='item.writeRead==0' title="不可写数据点">{{item.registerVal}}<span
                              v-if='item.unit'>({{item.unit}})</span></span>
                          <span v-if='item.writeRead!=0' @click="fromedit(item)">{{item.registerVal}}<span
                              v-if='item.unit'>({{item.unit}})</span></span>
                        </span>
                      </div>
                    </li>
          <!-- <li v-for="item in givelist" v-if="item.level!=0" @click="deviceitem(item)"><span class="hdpi-r-l"
              :title="item.triggerText">{{item.createTime}}【{{item.state}}】SN: {{item.deviceSn}} {{item.deviceName}}:
              {{item.triggerText}}</span></li> -->
        </ul>
      </div>
      <div class="grid-back" style="min-height: 260px;height:40%">
        <ul class="hdpi-r-ul">
          <li style="padding-bottom:10px;font-size: 14px;font-weight: bold;text-align: right;">
            <span style="float:left;line-height:2">告警记录</span>
            <el-select size="mini" v-model="level" placeholder="告警等级" @change="alarmget()" style="width:120px;">
              <el-option label="所有"></el-option>
              <el-option v-for="item in alaem_grade" :key="item.value" :label="item.remark" :value="item.value">
              </el-option>
            </el-select>
          </li>
          
          <li v-for="item in givelist" v-if="item.level!=0" @click="alarmitem(item)"><span class="hdpi-r-l"
              :title="item.triggerText">{{item.createTime}}【{{item.state}}】SN: {{item.deviceSn}} {{item.deviceName}}:
              {{item.triggerText}}</span></li>
        </ul>
      </div>
    
    </el-col>

    <el-dialog title="编辑" v-show="editFormVisible" v-model="editFormVisible" @close="editFormVisible=false">
      <div slot="footer" style="text-align: left; ">
        <el-form :model="editForm" label-width="80px" ref="editForm">
          <el-form-item label="数据点值" prop="name">
            <el-input size="mini1" v-model="value2" auto-complete="off"></el-input size="mini1">
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:right;">
          <el-button @click.native="editFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="editSubmit">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="处理告警" v-show="editFormVisible1" v-model="editFormVisible1" @close="editFormVisible1=false">
      <div slot="footer" style="text-align: left; ">
        <el-form :model="editForm1" label-width="80px" ref="editForm">
          <el-form-item label="处理状态">
            <el-radio-group v-model="editForm1.state">
              <el-radio label="0">未处理</el-radio>
              <el-radio label="1">已处理</el-radio>
              <el-radio label="2">误报</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="处理结果">
            <el-input size="mini1" type="textarea" v-model="editForm1.remark"></el-input size="mini1">

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:right;">
          <el-button @click.native="editFormVisible1 = false">取消</el-button>
          <el-button type="primary" @click.native="editSubmit1" :loading="editLoading">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- <el-dialog title="告警记录" v-show="givdis" width="95%"    @close="givdis=false" > 
      <div slot="footer" style="text-align: left; height: 500px;">
       <iframe src="http://localhost:8083/#/givehistry" width="100%;"style="height:500px;border: 0;"  ></iframe>
      </div>
    </el-dialog> -->
    <el-dialog :title="showtitle" v-show="historydis" width="95%" @close="historydis=false">
      <div slot="footer" style="text-align: left; height: 600px;">
        <iframe width="100%;" style="height:600px;border: 0;" :src="ifsrc"></iframe>
      </div>
    </el-dialog>
  </el-row>

</template>

<script>
  // import 'element-ui/lib/theme-chalk/display.css';
  import echarts from "echarts";
  import {
    alarm_log_count,
    device_query,
    device_new_up,
    device_my,
    device_get,
    device_recipe_body_list,
    device_cmd,
    alarm_log_query,
    alarm_log_get,
    alarm_log_recover,
    device_location_track_query,
    alarm_log_queryDevice,
    alarm_log_countLevel,
    dict_query,
    user_query,
    device_count_for_hdip,
    device_state_log_daily_count,
    device_area_new_up,
    device_guild_new_up,
    device_flow_count_device_over_flow,
    user_querycompany,
    device_template_query

  } from '../../api/api';
  export default {
    data() {
      return {
        value1:100,//进度条
        iframeStyle:'border: 0;width: 100%;height: 100%;',
        cnStyle:'',
        btStyle:'color:#fff;position: absolute;top:10px;right:0;',
        btName:'全屏',
        topoStyle:'height:96%;',
          templateList:'',//设备模板列表
          templateId:'',//设备模板ID
          deviceName:'',
          deviceSn:'',
        t1: '',
        alarm_count2: '',
        lr: 14,
        firstname: 'first',
        foritem: '',
        dailyitem: [],
        maphide: false,
        scadeitem: '',
        area: '',
        pertop: '',
        perbottom: '',
        usertype: '',
        firmlist: '',
        userclist: '',
        userId: '',
        companyId: '',
        reportshow: true,
        alaem_grade: '',
        level: '',
        pickerOptions2: {
          shortcuts: [{
            text: '最近1小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近24小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        options: '',
        activeName2: 'first',
        // second first
        ifsrc: '',
        ifsrc1:'',
        givdis: false,
        historydis: false,
        editLoading: false,
        editFormVisible1: false,
        editForm1: {
          id: '',
          state: '',
          remark: '',
        },
        disimg: '',
        device_mylist: '',
        device_new_uplist: [],
        value3: true,
        item: 0,
        address_detail: null,
        defaultProps: {
          children: "children",
          label: "label"
        },

        value2: '',

        chartColumn3: null,
        chartColumn2: null,
        chartColumn1: null,
        chartColumn: null,
        vertical: null,
        vertical1: null,
        vertical2: null,
        vertical3: null,
        vertical4: null,
        mapbool: false,
        users: '',
        device_top: 0,
        device_dw: 0,
        device_dis: '',
        deviceId: '',
        registerlist: '',
        deviceindex: 0,
        givelistdis: '',
        givelist: '',
        givelist2: '',
        loading: false,
        editForm: '',
        editFormVisible: false,
        eventlist: '',
        alarm_count: '',
        alarm_count1: '',
        zoom: 7,
        hdpi_show: false,
        myIcon2: '',
        carMk: '',
        trajectory: [],
        trajectorys: '',
        value4: [new Date().getTime() - 3600 * 1000 * 24 * 1, new Date()],
        filters: {
          startTime: '',
          endTime: '',
        },
        showtitle: '',
        industryItem: [],
        areaItem: [],
        areanew: '',
        guildnew: '',
        guilname: [],
        areaname: [],
        leftbool: '隐藏',
        rightbool: '隐藏',
        checkClick: false,
        t: '',
        s:'',
        maps:'',
        maps1:'',
        maps2:'',
        maploading:false,
        cityName:''//当前定位城市
      };
    },

    methods: {
      formatTooltip(val) {
        
        this.iframeStyle='position: absolute;left: 1%;width: 98%;top: 40px;height: 99%;background:#fff;z-index:10001;transform: scale('+val/100+")";
        return val +'%';
      },
      leave(){

        console.log(2)
      },
      enter(){
        console.log(1)
        window.event.preventDefault();
        window.event.stopPropagation();
      },
      lrget() {},
      leftshow() {

        console.log(this.leftbool)
        if (this.leftbool == "隐藏") {
          console.log(this.lr)
          this.leftbool = "显示";
          this.lr = this.lr + 5;
        } else {

          this.lr = this.lr - 5;
          this.leftbool = "隐藏";
        }
        let _this = this;
        setTimeout(() => {
          console.log(1)

          _this.vertical3.resize();
          _this.vertical4.resize();
          _this.vertical2.resize();
          _this.vertical1.resize();
          _this.vertical.resize();
          _this.chartColumn.resize();
          _this.chartColumn1.resize();
          _this.chartColumn2.resize();
          _this.chartColumn3.resize();
        }, 500);
      },
      rightshow() {
        console.log(this.rightbool)
        if (this.rightbool == "隐藏") {
          this.rightbool = "显示";
          this.lr = this.lr + 5;
        } else {

          this.lr = this.lr - 5;
          this.rightbool = "隐藏";
        }
        let _this = this;
        setTimeout(() => {
          console.log(1)

          _this.vertical3.resize();
          _this.vertical4.resize();
          _this.vertical2.resize();
          _this.vertical1.resize();
          _this.vertical.resize();
          _this.chartColumn.resize();
          _this.chartColumn1.resize();
          _this.chartColumn2.resize();
          _this.chartColumn3.resize();
        }, 500);
      },
      intget(s, g) {

        let num = parseFloat(s / g * 100).toFixed(1);
        // alert(num)
        return num;
      },
      dailyget() {
        let end = new Date();
        let start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        let para = {
          startTime: this.getdata(start),
          endTime: this.getdata(end)
        };
        console.log(start)
        console.log(end)
        console.log(para)
        device_count_for_hdip().then((res) => {
          this.begCode(res.code, res.message);
          if (res.code == 0) {

            res.data = JSON.parse(res.data)
            this.foritem = res.data;
            this.industryItem = [];
            this.areaItem = [];
            console.log(this.foritem)
            for (let i in this.foritem.deviceGuild) {
              this.industryItem.push({
                value: this.foritem.deviceGuild[i].sum,
                name: this.foritem.deviceGuild[i].name
              })
            }
            for (let i in this.foritem.deviceArea) {
              this.areaItem.push({
                value: this.foritem.deviceArea[i].sum,
                name: this.foritem.deviceArea[i].name
              })
            }

            this.drawvertical3();
            this.drawvertical4();
          }
        });
        device_area_new_up().then((res) => {
          this.begCode(res.code, res.message);
          if (res.code == 0) {

            res.data = JSON.parse(res.data)
            this.areanew = [];
            this.areaname = [];
            for (let i in res.data) {

              this.areanew.push({
                name: i,
                data: res.data[i],
                type: "line",
              })

              this.areaname.push(i)
            }
            console.log(this.areanew)
            this.drawColumnChart2()

          }
        });
        device_guild_new_up().then((res) => {
          this.begCode(res.code, res.message);
          if (res.code == 0) {

            res.data = JSON.parse(res.data)
            this.guildnew = [];
            this.guilname = [];
            for (let i in res.data) {

              this.guildnew.push({
                name: i,
                data: res.data[i],
                type: "line",
              })
              console.log(i)
              this.guilname.push(i)
            }

            console.log(this.guildnew)
            this.drawColumnChart3()
          }
        });

        device_state_log_daily_count(para).then((res) => {
          this.begCode(res.code, res.message);
          this.dailyitem = [];
          if (res.code == 0) {
            res.data = JSON.parse(res.data)
            for (let i in res.data) {
              this.dailyitem.push([res.data[i].time, res.data[i].num])
            }

            this.drawColumnChart1();
            // this.dailyitem = JSON.parse(res.data);
            console.log(this.dailyitem)
          }
        });
      },
      mapsmall() {

        var showMap = document.getElementById("pballmap");
        var showMap1 = document.getElementById("pballmap1");
        var showMap2 = document.getElementById("pballmap2");

        showMap.style.height = "620px";
        showMap.style.position = 'relative';
        showMap.style.zIndex = '0';

        showMap1.style.height = "620px";
        showMap1.style.position = 'relative';
        showMap1.style.zIndex = '0';
        showMap2.style.height = "620px";
        showMap2.style.position = 'relative';
        showMap2.style.zIndex = '0';

        this.maphide = false;
      },
      mapfull(s) {
        this.maphide = true;
        var showMap = document.getElementById("allmap" + this.s);

        var showMap1 = document.getElementById("pballmap" + this.s);

        showMap1.style.width = document.documentElement.clientWidth + "px";
        showMap1.style.height = document.documentElement.clientHeight + "px";
        showMap.style.width = document.documentElement.clientWidth + "px";
        showMap.style.height = document.documentElement.clientHeight + "px";
        showMap1.style.position = 'fixed';
        showMap1.style.left = '0px';
        showMap1.style.top = '0px';
        showMap1.style.zIndex = '9999';
        // this.map1();

      },
      select_scade1(s) {
        if (!this.companyId) {
          return false;
        }
        this.scadeitem = '';
        let para = {
          pageNo: 1,
          pageSize: 9999,
          type: 0,
          companyId: this.companyId
        }
        user_query(para).then((res) => {

          this.begCode(res.code, res.message);
          this.userclist = res.data.list;
          // if (this.userclist[0]) {

          //   this.userId = this.userclist[0].userId;
          //   this.select_scade();
          // } else {
          //   this.userId = '';
          // }


        });
        this.getUsers()
      },
      select_scade() {

        this.getUsers();
      },
      maptest(){
        if(this.maps2&&this.maps1&&this.maps){
      
        }
         
      },
      tabchange(tab, event) {
        this.maploading=true;
        this.firstname = tab.name;
        console.log(tab)
        let longitude = 114.05207707540185;
        let latitude = 22.73163396596424;
        let pt1 = new BMap.Point(
          longitude,
          latitude,
        );
     
        this.maps2.centerAndZoom('深圳',5);    
        this.maps.centerAndZoom('深圳', 5);
        this.maps1.centerAndZoom('深圳', 5);
        // let s = this.convert(pt1);
        console.log(pt1)
       
        if (tab.name == "second") {
          this.s=1;
          this.mapbool = true;
        } else {
          this.mapbool = false;
        }
        if (tab.name == "first"){
          this.s='';
        }
        if (tab.name == "third") {
          
          this.s=2;
          this.reportshow = false;
          let parse = {
            type: 1,
            state: 0,
            pageNo: 1,
            pageSize: 200,
            deviceUserId: this.userId,
            companyId: this.companyId
          }
          alarm_log_queryDevice(parse).then((res) => {
            console.log(res)
            this.eventlist = res.data.list;
            this.device_dw = 0;
            this.device_top = 0;
            this.begCode(res.code, res.message);
            this.users = res.data.list;
            if (!res.data.list[this.deviceindex]) {

              this.deviceId = 0;
            } else {

              this.deviceId = res.data.list[this.deviceindex].deviceId;
            }

            // this.deviceGet();
        
          });
        } else {
          // this.maps1.panTo(pt1);
          //   this.maps.panTo(pt1);
        
            console.log('maps1:true')
          let para = {
            pageNo: 1,
            pageSize: 20000,
            deviceUserId: this.userId,
            companyId: this.companyId,
            area: this.area

          };
          // device_query(para).then((res) => {
          //   this.device_dw = 0;
          //   this.device_top = 0;
          //   this.begCode(res.code, res.message);
          //   this.users = res.data.list;
          //   if (!res.data.list[this.deviceindex]) {

          //     this.deviceId = 0;
          //   } else {

          //     this.deviceId = res.data.list[this.deviceindex].deviceId;
          //   }
        
          // });
         
          this.reportshow = true;
    
        }
        setTimeout(() => {
            
            this.maploading=false;
              }, 500);
      },
      handleSave() {
        this.alarmget1();
        this.alarmget();
        console.log("收到告警")
        device_flow_count_device_over_flow().then((res) => {

          this.alarm_count2 = JSON.parse(res.data)
        })
      },
      handleSave1() {
        console.log('告警1');
        let _this = this;
        if(this.deviceId == 0){
          return false
        }
        let para1 = {
          deviceId: this.deviceId,
        }
        console.log(this.checkClick)
        if (this.checkClick == true) {

          return false;
        }
        this.checkClick = true;

        setTimeout(function () {
          console.log(_this.checkClick)
          _this.checkClick = false;
        }, 3000);
        device_get(para1).then((res) => {
          // res.code=403;
          this.begCode(res.code, res.message);
          this.device_dis = res.data;
          if (!res.data) {


            this.loading = false;
          } else {
            if (res.data.devicePictureList[0].path) {


              this.disimg = res.data.devicePictureList[0].path;
            } else {
              this.disimg = '';
            }

            //NProgress.done();
          }

        });
          if(!para1.deviceId){
          return false
        }
        device_recipe_body_list(para1).then((res) => {

          this.begCode(res.code, res.message);
          for (let i in res.data) {

            // if (res.data[i].registerVal) {
            //   if (res.data[i].decimalAccuracy) {
            //     res.data[i].registerVal = parseFloat(res.data[i].registerVal / Math.pow(10,
            //       res.data[i].decimalAccuracy).toPrecision(12));


            //     if (res.data[i].decimalAccuracy == 1) {
            //       res.data[i].registerVal = res.data[i].registerVal.toFixed(1)
            //     }
            //   }
            // }

            // this.devide_list[i].registerVal=this.devide_list[i].registerVal/


          }
          this.registerlist = res.data;
          console.log(this.registerlist)
        })

        // this.dailyget();



        this.publicmy();
        console.log("收到告警1")
      },
      handleSave2() {
        device_flow_count_device_over_flow().then((res) => {

          this.alarm_count2 = JSON.parse(res.data)
        })
        // this.dailyget();
        console.log("收到告警2")

        this.publicmy();
        let para1 = {
          deviceId: this.deviceId,
        }
        device_get(para1).then((res) => {
          // res.code=403;
          this.begCode(res.code, res.message);
          this.device_dis = res.data;
          if (!res.data) {


            this.loading = false;
          } else {
            if (res.data.devicePictureList[0].path) {


              this.disimg = res.data.devicePictureList[0].path;
            } else {
              this.disimg = '';
            }

            //NProgress.done();
          }

        });
          if(!para1.deviceId){
          return false
        }
        device_recipe_body_list(para1).then((res) => {

          this.begCode(res.code, res.message);
          for (let i in res.data) {

            // if (res.data[i].registerVal) {
            //   if (res.data[i].decimalAccuracy) {
            //     res.data[i].registerVal = parseFloat(res.data[i].registerVal / Math.pow(10,
            //       res.data[i].decimalAccuracy).toPrecision(12));


            //     if (res.data[i].decimalAccuracy == 1) {
            //       res.data[i].registerVal = res.data[i].registerVal.toFixed(1)
            //     }
            //   }
            // }

            // this.devide_list[i].registerVal=this.devide_list[i].registerVal/


          }
          this.registerlist = res.data;
        })
      },
      second1() {
        if (this.value4) {

          this.filters.startTime = this.getdata(this.value4[0]);
          this.filters.endTime = this.getdata(this.value4[1]);

        } else {
          this.filters.startTime = '';
          this.filters.endTime = '';
        }
        this.trackGet();
      },
      getdata(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        minute = minute < 10 ? ('0' + minute) : minute;
        var second = date.getSeconds();
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;

      },
      device_clear() {
        this.hdpi_show = false;
          this.cnStyle="height:97%"
          this.topoStyle='height:96%';
      },
      eventdit() {

      },
      giveshow() {
        this.showtitle = "告警记录";
        localStorage.setItem('facility_details', this.deviceId);
        this.ifsrc = "https://" + location.host + "/?hdpi=0&s=" + Math.ceil(Math.random() * 10000) + "#/givehistry";
        console.log(this.ifsrc)
        setTimeout(() => {

          this.historydis = true;
        }, 500);
      },
      historyshow() {
        this.showtitle = "历史记录";
        localStorage.setItem('facility_details', this.deviceId);


        localStorage.setItem('pointname', this.device_dis.name);
        this.ifsrc = "https://" + location.host + "/?hdpi=0&s=" + Math.ceil(Math.random() * 10000) + "#/hdpihistry";
        setTimeout(() => {

          this.historydis = true;
        }, 500);
      },
      giveedit(s) {
        this.editFormVisible1 = true;
        let para = {
          id: s.id
        };
        alarm_log_get(para).then((res) => {
          this.begCode(res.code, res.message);
          if (res.code == 0) {
            this.editLoading = false;
            //NProgress.done();
            this.editForm1.idList = [res.data.id];
            this.editForm1.remark = res.data.remark;
            this.editForm1.state = res.data.state.toString();
            console.log(this.editForm1)
          }
        });
      },

      editSubmit1: function () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true;
              //NProgress.start();
              let para = Object.assign({}, this.editForm1);
              alarm_log_recover(para).then((res) => {
                this.begCode(res.code, res.message);
                if (res.code == 0) {
                  this.editLoading = false;
                  //NProgress.done();
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  this.$refs['editForm'].resetFields();
                  this.editFormVisible1 = false;
                  this.alarmget();
                  this.deviceGet();
                }
              });
            });
          }
        });
      },
      deviceshow() {
        localStorage.setItem('facility_details', this.deviceId)
        // this.$router.push({
        //   path: '/devices/deviceDatail'
        // })
        this.showtitle = "设备详情";
        localStorage.setItem('facility_details', this.deviceId);
        this.ifsrc = "https://" + location.host + "/?hdpi=0&s=" + Math.ceil(Math.random() * 10000) + "#/hdpidevice?";
        setTimeout(() => {

          this.historydis = true;
        }, 500);
      },
      rollImg() {
        console.log(1);
      /* 获取当前页面的缩放比
            若未设置zoom缩放比，则为默认100%，即1，原图大小
        */
      var zoom = parseInt(this.$refs.bigImage.style.zoom) || 100;
      /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
            wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
        */
      zoom += event.wheelDelta / 12;
      /* 最小范围 和 最大范围 的图片缩放尺度 */
      if (zoom >= 100 && zoom <250) {
        this.$refs.bigImage.style.zoom = zoom + "%";
      }
      console.log(zoom)
      return false;
    },
      toposhow(){
        if(this.btName=='全屏'){
      this.btName='取消全屏';
      this.cnStyle="position: fixed;left: 0;top: 0;height: 100%;z-index:100"
        this.iframeStyle='position: absolute;left: 1%;width: 98%;height: 99%;background:#fff;z-index:10001;';
        this.btStyle='position: fixed;z-index:10002;right:10px;top:20px;color:#fff;';
        this.topoStyle="    margin-left: 2%;overflow: hidden;position: relative;height: 96%;background: #fff;"
        }else{
          if(this.hdpi_show == false){

          this.topoStyle='height:96%';
      this.cnStyle="height:97%";
          }else{
            
          this.cnStyle="height:62%"
          this.topoStyle='height:96%';
          }
        
      this.btName='全屏';
      this.iframeStyle='border: 0;width: 100%;height: 100%;';
      this.btStyle='color:#fff;position: absolute;top:10px;right:0;';
        }
   //  window.open("https://hkyadmin.envicool-iot.com/configurat/spa/?deviceId="+this.deviceId+"&token="+JSON.parse(localStorage.getItem("key"))+"&id="+this.templateId+"&s=" + Math.ceil(Math.random() * 10000)+'#/fullscreen',"_blank");  
              
      },
      alarmitem(s){
   sessionStorage.setItem('time', s.updateTime);
        this.giveshow();
      },
      deviceitem(s) {
          if(s.deviceId==this.deviceId){
              return false;
          }
          this.topoStyle='height:96%';
          console.log(s.deviceId)
          this.deviceId=s.deviceId;
           this.ifsrc1 = "/configurat/spa/?deviceId="+this.deviceId+"&token="+JSON.parse(localStorage.getItem("key"))+"&id="+this.templateId+"&s=" + Math.ceil(Math.random() * 10000)+'#/fullscreen';  
           console.log(this.ifsrc1)
              this.hdpi_show=true;
              
          this.cnStyle="height:62%"
        // sessionStorage.setItem('time', s.updateTime);
        this.deviceGet();
        this.alarmget();
        // this.giveshow();

      },
      editSubmit() {

        this.$confirm('确认提交吗？', '提示', {}).then(() => {
          let para = {
            code: 'writeRegister',
            deviceIdList: [localStorage.getItem('facility_details')],
            attrs: {
              deviceSlaveSn: this.editForm.slaveSn,
              register: this.editForm.register,
              registerVal: this.value2,
              deviceType: 1
            }
          };
          this.loading = true;
          //NProgress.start();
          device_cmd(para).then((res) => {
            this.begCode(res.code, res.message);
            this.loading = false;
            this.editFormVisible = false;
            //NProgress.done();
            this.value2 = '';
          });
        });
      },
      fromedit(row) {
        if (this.menubt.indexOf('/device/cmd') == -1) {
          this.$message({
            message: '您没有下发设备命令的权限',
            type: 'warning'
          });
          return false;
        }
        this.editFormVisible = true;
        this.editForm = row;
      },
      scade(row) {
        // this.$confirm('确认更换吗？', '提示', {}).then(() => {
        let para = {
          code: 'writeRegister',
          deviceIdList: [localStorage.getItem('facility_details')],
          attrs: {
            deviceSlaveSn: row.slaveSn,
            register: row.register,
            registerVal: row.registerVal,
            deviceType: 1
          }
        };
        this.loading = true;
        //NProgress.start();
        device_cmd(para).then((res) => {
          this.begCode(res.code, res.message);
          this.loading = false;
          //NProgress.done();
        });
        // });
      },
      deviceleft() {
        this.deviceindex--;
        if (this.deviceindex < 0) {
          this.deviceindex = this.users.length - 1;
        }
        if (this.users.length <= 0) {
          return false;
        }
        this.deviceId = this.users[this.deviceindex].deviceId;
        this.deviceGet();
      },
      deviceright() {
        this.deviceindex++;
        if (this.deviceindex >= this.users.length) {
          this.deviceindex = 0;
        }
        if (this.users.length <= 0) {
          return false;
        }
        this.deviceId = this.users[this.deviceindex].deviceId
        this.deviceGet();
      },
      getUsers() {
        console.log(this.userId);
        let para = {
          pageNo: 1,
          pageSize: 20000,
          deviceUserId: this.userId,
          companyId: this.companyId,
          area: this.area,
          miniLev:3

        };
        this.listLoading = true;
        //NProgress.start();
        let para1 = {
          pageNo: 1,
          pageSize: 2000,
          moving: 1,
          deviceUserId: this.userId,
          companyId: this.companyId,
          miniLev:2
        };
        
        this.listLoading = true;
        //NProgress.start();
        device_query(para1).then((res) => {
          this.begCode(res.code, res.message);
          this.options = res.data.list;
        });
        device_query(para).then((res) => {
          this.device_dw = 0;
          this.device_top = 0;
          this.begCode(res.code, res.message);
          this.users = res.data.list;
          if (!res.data.list[this.deviceindex]) {

            this.deviceId = 0;
          } else {

            this.deviceId = res.data.list[this.deviceindex].deviceId;
          }
          this.deviceGet();
          this.map1();
        });

        this.alarmget1();
      },

      handleNodeClick(d) {
        console.log(d);
      },
      map2() {
        var th = this;
        let longitude = 114.05207707540185;
        let latitude = 22.73163396596424;
        // if (this.device_dis) {

        //   longitude = this.device_dis.deviceLocation.longitude;
        //   latitude = this.device_dis.deviceLocation.latitude;

        // }
        // if (!longitude) {
        //   longitude = 114.05207707540185
        // }
        // if (!latitude) {
        //   latitude = 22.73163396596424
        // }
        let map = new BMap.Map(this.$refs.allmap2); // 创建Map实例
        th.maps2=map;
        var mapStyle = {
          features: ["road", "building", "water", "land"], //隐藏地图上的"poi",
          style: "midnight",
        };
        map.setMapStyle(mapStyle);
        let pt1 = new BMap.Point(
          longitude,
          latitude,
        );


        // let s = this.convert(pt1);
        console.log('地图2');
        console.log(this.eventlist);
        map.centerAndZoom(pt1, 5);

        map.enableScrollWheelZoom();


        var markers = [];
        var markerClusterer = null;
        for (let i in this.eventlist) {
          let pt = new BMap.Point(
            this.eventlist[i].longitude,
            this.eventlist[i].latitude,
          );
          let s = this.convert(pt);
          var myIcon = new BMap.Icon(
            "",
            new BMap.Size(25, 25), {
              
            });

          let marker = new BMap.Marker(s, {
            icon: myIcon
          });
          map.addOverlay(marker);
          marker.addEventListener("click", () => {
            this.hdpi_show = true;
            this.zoom = map.getZoom();
            console.log(this.eventlist[i])
            this.deviceId = this.eventlist[i].deviceId;
            this.deviceGet();
            this.giveshow();
            // console.log(s);
          });
          let num = s;

          num.lat = s.lat;
          marker.addEventListener("mouseover", () => {
            console.log(this.eventlist[i])
            if (!this.eventlist[i].deviceSn) {
              this.eventlist[i].deviceSn = '';
              this.eventlist[i].deviceName = '设备不存在';
            }
            var opts = {
              width: 180, // 信息窗口宽度
              height: 30, // 信息窗口高度
              title: this.eventlist[i].deviceName, // 信息窗口标题
              enableMessage: true, //设置允许信息窗发送短息
              message: this.eventlist[i].deviceSn
            }
            var infoWindow = new BMap.InfoWindow(opts.message, opts); // 创建信息窗口对象   
            map.openInfoWindow(infoWindow, num); // 打开信息窗口



          });
          marker.addEventListener("mouseout", () => {
            map.closeInfoWindow()
          })
          markers.push(marker);

        }
        markerClusterer = new BMapLib.MarkerClusterer(map, {
          markers: markers
        });

        markerClusterer.setMaxZoom(16);


      },
      map1() {

        var th = this;
        let longitude = 114.05207707540185;
        let latitude = 22.73163396596424;
        // if (this.device_dis) {

        //   longitude = this.device_dis.deviceLocation.longitude;
        //   latitude = this.device_dis.deviceLocation.latitude;

        // }
        // if (!longitude) {
        //   longitude = 114.042950
        // }
        // if (!latitude) {
        //   latitude = 22.726145
        // }
        
        let map = new BMap.Map(this.$refs.allmap); // 创建Map实例
        this.maps1=map;
        var mapStyle = {
          features: ["road", "building", "water", "land"], //隐藏地图上的"poi",
          style: "midnight",
        };

        map.setMapStyle(mapStyle);
//         var geolocation = new BMap.Geolocation();
// geolocation.getCurrentPosition(function(r){
// if(this.getStatus() == BMAP_STATUS_SUCCESS){
// var mk = new BMap.Marker(r.point);
// map.addOverlay(mk);
// map.panTo(r.point);
// alert('您的位置：'+r.point.lng+','+r.point.lat);
// }
// else {
// alert('failed'+this.getStatus());
// }        
// },{enableHighAccuracy: true})

        let pt1 = new BMap.Point(longitude,
          latitude
        );
        map.centerAndZoom(pt1, 5);
        var ac = new BMap.Autocomplete( //建立一个自动完成的对象
          {
            "input": "suggestId",
            "location": map
          });
        var myValue;
        ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
          var _value = e.item.value;
          myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
          th.address_detail = myValue;
          // self.form.deviceLocation.address = myValue;
          setPlace();
        });


        function setPlace() {
          // map.clearOverlays(); //清除地图上所有覆盖物
          function myFun() {
            th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
            map.centerAndZoom(th.userlocation, 9);
            // map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注

            th.getBoundary2(map, th.address_detail)
            console.log(th.userlocation)
          }
          var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
          });
          local.search(myValue);

          //测试输出坐标（指的是输入框最后确定地点的经纬度）
          map.addEventListener("click", function (e) {
            //经度
            console.log(th.userlocation.lng);
            //维度
            console.log(th.userlocation.lat);

          })
        }

        let s = this.convert(pt1);
        console.log(s)
        // map.centerAndZoom(new BMap.Point(s.lng, s.lat),
        //   this.zoom);
        map.enableScrollWheelZoom();
        // map.addControl(
        //   new BMap.MapTypeControl({
        //     //添加地图类型控件
        //     mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        //   })
        // );
        var MAX = this.users.length;
        var markers = [];
        var markerClusterer = null;
        var myIcon = new BMap.Icon(
            "",
            new BMap.Size(25, 25), {

            });
        for (let i in this.users) {
          let pt = new BMap.Point(
            this.users[i].deviceLocation.longitude,
            this.users[i].deviceLocation.latitude,
          );

          let s = this.convert(pt);
        

          let marker = new BMap.Marker(s, {
            icon: myIcon
          });
          map.addOverlay(marker);

          marker.addEventListener("click", () => {

           
            this.hdpi_show = true;
            this.zoom = map.getZoom();
            
            this.deviceId = this.users[i].deviceId;
            this.deviceGet();
          });

          let num = s;

          num.lat = s.lat;
          marker.addEventListener("mouseover", () => {

            var opts = {
              width: 180, // 信息窗口宽度
              height: 30, // 信息窗口高度
              title: this.users[i].name, // 信息窗口标题
              enableMessage: true, //设置允许信息窗发送短息
              message: this.users[i].deviceSn
            }
            //      map.centerAndZoom(new BMap.Point(s.lng, s.lat),
            // this.zoom);
            var infoWindow = new BMap.InfoWindow(opts.message, opts); // 创建信息窗口对象   
            map.openInfoWindow(infoWindow, num); // 打开信息窗口

          });
          marker.addEventListener("mouseout", () => {
            map.closeInfoWindow()
          })

          markers.push(marker);



        }
        markerClusterer = new BMapLib.MarkerClusterer(map, {
          markers: markers
        });
        markerClusterer.setMaxZoom(20);
       

      },
      openHeatmap() {

        heatmapOverlay.show();
      },
      trackGet() {
        this.trajectory = [];
        for (let i in this.trajectorys) {
          let parays = {
            deviceId: this.trajectorys[i],
            pageNo: 1,
            pageSize: 999,
            startTime: this.filters.startTime,
            endTime: this.filters.endTime
          };
          console.log(this.trajectorys[i])
          device_location_track_query(parays).then((res) => {
            this.begCode(res.code, res.message);
            this.trajectory.push(res.data.list);

            this.map();
          })
        }
      },
      deviceGet() {
        localStorage.setItem('facility_details', this.deviceId);
        let para = {
          deviceId: this.deviceId,
          pageNo: 1,
          pageSize: 200,
          startTime: this.filters.startTime,
          endTime: this.filters.endTime
        };
        this.loading = true;


        let para1 = {
          deviceId: this.deviceId,
        }
        device_get(para1).then((res) => {
          // res.code=403;
          this.begCode(res.code, res.message);
          this.device_dis = res.data;
          if (!res.data) {

            this.loading = false;
          } else {
            if (res.data.devicePictureList[0].path) {


              this.disimg = res.data.devicePictureList[0].path;
            } else {
              this.disimg = '';
            }
        
            //NProgress.done();
            this.loading = false;
          }

        });
        if(!para.deviceId){
          return false
        }
        device_recipe_body_list(para).then((res) => {

          this.begCode(res.code, res.message);
          for (let i in res.data) {


            let para1 = {
              deviceRecipePictureGroupId: res.data[i].deviceRecipePictureGroupId
            };

            // if (res.data[i].registerVal) {
            //   if (res.data[i].decimalAccuracy) {
            //     res.data[i].registerVal = parseFloat(res.data[i].registerVal / Math.pow(10,
            //       res.data[i].decimalAccuracy).toPrecision(12));


            //     if (res.data[i].decimalAccuracy == 1) {
            //       res.data[i].registerVal = res.data[i].registerVal.toFixed(1)
            //     }
            //   }
            // }

            // this.devide_list[i].registerVal=this.devide_list[i].registerVal/


          }
          this.registerlist = res.data;
        })

        this.alarmget();
      },
      showPolyLine(points, color, map, nameSn,address) {
        console.log(points);
        var pLine = [];
        var opts = {
          width: 180, // 信息窗口宽度
          height: 30, // 信息窗口高度
          title: nameSn.name, // 信息窗口标题
          enableMessage: true, //设置允许信息窗发送短息
          message: nameSn.sn
        }
         var opts1 = {
          width: 180, // 信息窗口宽度
          height: 30, // 信息窗口高度
          title: nameSn.address, // 信息窗口标题
          enableMessage: true, //设置允许信息窗发送短息
          message: nameSn.createTime
        }
        for (let i in  points) {
          pLine.push(new BMap.Point(points[i][0], points[i][1],points[i][2], points[i][3]));
          var myIcon = new BMap.Icon(
            '',

            new BMap.Size(45, 45), {
              // anchor: new BMap.Size(20, 45), //这句表示图片相对于所加的点的位置mapStart
              // offset: new BMap.Size(-10, 45), // 指定定位位置
              // imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
            });
          var myIcon2 = new BMap.Icon(
            "",
            new BMap.Size(45, 45), {
              anchor: new BMap.Size(27, 13)
            }); //初始化终点坐标图标
          let num = new BMap.Point(points[i][0],
            points[i][1]);
            opts1 = {
          width: 180, // 信息窗口宽度
          height: 30, // 信息窗口高度
          title: points[i][2], // 信息窗口标题
          enableMessage: true, //设置允许信息窗发送短息
          message: points[i][3]
        }
             var myIcon3 = new BMap.Icon( 
            // "",
            "",
            new BMap.Size(25, 25), {
              anchor: new BMap.Size(5, 5)
            });
          if (i == 0) { //起点终点图标
            console.log(myIcon)
          let  marker = new BMap.Marker(new BMap.Point(points[i][0],
              points[i][1]), {
              icon: myIcon
            })
            map.addOverlay(marker);

            marker.addEventListener("mouseover", () => {


              var infoWindow = new BMap.InfoWindow(opts.message, opts); // 创建信息窗口对象   
              map.openInfoWindow(infoWindow, num); // 打开信息窗口

            });
            marker.addEventListener("mouseout", () => {
              map.closeInfoWindow()
            })
               marker.addEventListener("click", () => {
                
              console.log(i);
              var infoWindow = new BMap.InfoWindow(opts1.message, opts1); // 创建信息窗口对象   
              map.openInfoWindow(infoWindow, num); // 打开信息窗口

            });
          } else if (i == points.length - 1) {

          let  marker = new BMap.Marker(new BMap.Point(points[i][0],
              points[i][1]), {
              icon: myIcon2
            })
            console.log(i);
            marker.addEventListener("mouseover", () => {


              var infoWindow = new BMap.InfoWindow(opts.message, opts); // 创建信息窗口对象   
              map.openInfoWindow(infoWindow, num); // 打开信息窗口

            });
            marker.addEventListener("mouseout", () => {
              map.closeInfoWindow()
            })
            
            map.addOverlay(marker);
               marker.addEventListener("click", () => {
                
              console.log(opts1);
              var infoWindow = new BMap.InfoWindow(opts1.message, opts1); // 创建信息窗口对象   
              map.openInfoWindow(infoWindow, num); // 打开信息窗口

            });
          }else{
            
           let  marker = new BMap.Marker(new BMap.Point(points[i][0],
              points[i][1]), {
              icon: myIcon3
            })
            
            map.addOverlay(marker);
               marker.addEventListener("click", () => {
              
              opts1 = {
                width: 180, // 信息窗口宽度
                height: 30, // 信息窗口高度
                title: points[i][2], // 信息窗口标题
                enableMessage: true, //设置允许信息窗发送短息
                message: points[i][3]
              }
              var infoWindow = new BMap.InfoWindow(opts1.message, opts1); // 创建信息窗口对象  
              // var infoWindow = new BMap.InfoWindow(points[i][2], points[i][3]); // 创建信息窗口对象   
              map.openInfoWindow(infoWindow, num); // 打开信息窗口

            });
          }
         

        }
        /* points[][]数据结构为二维数组，这里转换为Marker，再将多个marker点放入pline，组成一条线  end */


        /* 添加轨迹接口begin */
        var polyline = new BMap.Polyline(pLine, {
          strokeColor: color,
          // strokeWeight: 6,
          strokeWeight: 2,
          strokeOpacity: 0.8
        });
        console.log(points)
        
        map.addOverlay(polyline);

      },
      getBoundary2(map, city) {
        var bdary = new BMap.Boundary();
        var name = city;

        console.log(name)
        bdary.get(name, function (rs) { //获取行政区域
          console.log(rs)
          map.clearOverlays(); //清除地图覆盖物       
          var count = rs.boundaries.length; //行政区域的点有多少个
          console.log(count)
          for (var i = 0; i < count; i++) {
            console.log(i)
            var ply = new BMap.Polygon(rs.boundaries[i], {
              strokeWeight: 2, //设置多边形边线线粗

              strokeOpacity: 1, //设置多边形边线透明度0-1
              StrokeStyle: "solid", //设置多边形边线样式为实线或虚线，取值 solid 或 dashed
              fillOpacity: 0.1,
              strokeColor: "#3c8dbc", //设置多边形边线颜色

            }); //建立多边形覆盖物
            map.addOverlay(ply); //添加覆盖物
            // map.setViewport(ply.getPath()); //调整视野         
          }
        });
      },
      map() {

        let _this = this;
        // let longitude = 90.40;
        // let latitude = 39.90;
        let longitude=114.05207707540185;
        let latitude=22.73163396596424;
        if (this.trajectory[0]) {
          if (this.trajectory[0].length > 0) {

            longitude = this.trajectory[0][0].longitude;
            latitude = this.trajectory[0][0].latitude;

          }
        }
        // alert(longitude)
        // let longitude = 114.05207707540185;
        // let latitude = 22.73163396596424;
        if (!longitude) {
          longitude = 114.05207707540185;
        }
        if (!latitude) {
          latitude = 22.73163396596424;
        }
        let map = new BMap.Map(_this.$refs.allmap1); // 创建Map实例
        this.maps=map;
        var mapStyle = {
          features: ["road", "building", "water", "land"], //隐藏地图上的"poi",
          style: "midnight",
        };
        console.log(longitude)
        console.log(latitude)
        var point = new BMap.Point(longitude, latitude);
        map.centerAndZoom(point, 5);//5公里范围
        map.setMapStyle(mapStyle);
        map.enableScrollWheelZoom();
        // map.addControl(new BMap.NavigationControl());
        // map.addControl(new BMap.ScaleControl());
        // map.addControl(new BMap.OverviewMapControl());
        // map.addControl(new BMap.MapTypeControl());
        map.setCurrentCity("北京");
        /* 创建地图并添加控件end  */
        var colorList = [
          '#00ff9c', '#dfdfdf', '#FCCE10', '#E87C25', '#27727B',
          '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
          '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
        ];
        for (let i in this.trajectory) {
          var points = [];
          console.log(this.trajectory[i]);
          if (this.trajectory[i].length > 0) {

            var nameSn = {
              name: this.trajectory[i][0].name,
              sn: this.trajectory[i][0].deviceSn,
              address: this.trajectory[i][0].address,
              createTime: this.trajectory[i][0].createTime,
            };
            var address=[];
            for (let j in this.trajectory[i]) {

              points.push([this.trajectory[i][j].longitude, this.trajectory[i][j].latitude,this.trajectory[i][j].address,this.trajectory[i][j].createTime]);
              //轨迹图点击事件地址
              address.push({
                      name: this.trajectory[i][j].name,
              sn: this.trajectory[i][j].deviceSn,
              address: this.trajectory[i][j].address,
              createTime: this.trajectory[i][j].createTime,
              })

            }
            console.log(nameSn)
            console.log(address)
            console.log(points)
            this.showPolyLine(points, colorList[i], map, nameSn,address)
          }
        }
   

      },
      drowLine(map, temporary) {
        let _this = this;
        if (temporary && temporary.length > 1) { //判断数值为两个点时开始进行绘制
          for (var i = 0; i < temporary.length - 1; i++) {
            var polyline22 = new BMap.Polyline(
              [
                new BMap.Point(temporary[i].long, temporary[i].lat),
                new BMap.Point(temporary[i + 1].long, temporary[i + 1].lat)
              ], {
                // strokeColor: "red",
                // strokeWeight: 2,
                // strokeOpacity: 1,
                strokeColor: "#00FF00",
                strokeOpacity: 0.9,
                strokeWeight: 5
              }); //创建折线
            map.addOverlay(polyline22);
            _this.addMarkerEnd(new BMap.Point(temporary[i + 1].long, temporary[i + 1].lat), '终点', map, temporary[i +
              1]); //添加图标
          }
        }
      },

      addMarkerEnd(point, name, mapInit, trackUnit) {
        let _this = this;
        if (name == "终点") {
          if (_this.carMk) { //先判断第一次进来的时候这个值有没有定义，有的话就清除掉上一次的。然后在进行画图标。第一次进来时候没有定义也就不走这块，直接进行画图标
            mapInit.removeOverlay(_this.carMk);
          }
          _this.carMk = new BMap.Marker(point, {
            icon: _this.myIcon2
          }); // 创建标注
          // _this.carMk.setRotation(trackUnit.route); //trackUnit.route
          mapInit.addOverlay(_this.carMk); // 将标注添加到地图中
          // _this.carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

        }
      },
      addMarker(point, name, mapInit, trackUnit) {
        if (name == "起点") {
          var myIcon = new BMap.Icon(
            '',

            new BMap.Size(45, 45), {
              // anchor: new BMap.Size(20, 45), //这句表示图片相对于所加的点的位置mapStart
              // offset: new BMap.Size(-10, 45), // 指定定位位置
              // imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
            });
          var marker = new BMap.Marker(point, {
            icon: myIcon
          }); // 创建标注
          mapInit.addOverlay(marker); // 将标注添加到地图中
          // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }
      },
      drawvertical2() {
        this.vertical2 = echarts.init(document.getElementById("vertical2"));
        this.vertical2.setOption({
          // title: {
          //   text: "等级告警数统计",
          //   textStyle: {
          //     color: '#fff'
          //   },
          // },
          grid: {
            x: '10%',
            y: '19%',
            height: '60%'
          },
          tooltip: {
            position: 'right',
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },


          series: [{

            name: "告警数统计",
            type: "pie",
            radius: ["50%", "85%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
                value: this.alarm_count1.level0,
                name: "事件"
              },
              {
                value: this.alarm_count1.level1,
                name: "一般告警"
              },
              {
                value: this.alarm_count1.level2,
                name: "严重告警"
              },
              {
                value: this.alarm_count1.level3,
                name: "紧急告警"
              }
            ],
            itemStyle: {
              color: function (params) {
                //自定义颜色
                var colorList = [
                  '#00ff9c', '#dfdfdf', '#FCCE10', '#E87C25', '#27727B',
                  '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                  '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                ];
                return colorList[params.dataIndex]
              }

            }
          }]
        });
      },
      drawvertical4() {

        this.vertical4 = echarts.init(document.getElementById("vertical4"));
        this.vertical4.setOption({
          grid: {
            x: '10%',
            y: '19%',
            height: '60%'
          },
          tooltip: {
            position: 'right',
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },

          series: [{
            name: "设备数统计",
            type: "pie",
            radius: ["50%", "85%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              color: function (params) {
                //自定义颜色
                var colorList = [
                  '#00ff9c', '#dfdfdf', '#FCCE10', '#E87C25', '#27727B',
                  '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                  '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                ];
                return colorList[params.dataIndex]
              }

            },
            data: this.areaItem
          }]
        });


      },
      drawvertical3() {
        this.vertical3 = echarts.init(document.getElementById("vertical3"));
        this.vertical3.setOption({
          grid: {
            x: '10%',
            y: '19%',
            height: '60%'
          },
          tooltip: {
            position: 'right',
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },

          series: [{
            name: "设备数统计",
            type: "pie",
            radius: ["50%", "85%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              color: function (params) {
                //自定义颜色
                var colorList = [
                  '#00ff9c', '#dfdfdf', '#FCCE10', '#E87C25', '#27727B',
                  '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                  '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                ];
                return colorList[params.dataIndex]
              }

            },
            data: this.industryItem
          }]
        });

      },
      drawvertical1() {
        this.vertical1 = echarts.init(document.getElementById("vertical1"));
        this.vertical1.setOption({
          grid: {
            x: '10%',
            y: '19%',
            height: '60%'
          },
          tooltip: {
            position: 'right',
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },


          series: [{

            name: "告警数统计",
            type: "pie",
            radius: ["50%", "85%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
                value: this.alarm_count.prcessed,
                name: "已处理"
              },
              {
                value: this.alarm_count.noProcess,
                name: "未处理"
              },
              {
                value: this.alarm_count.distort,
                name: "误报"
              }
            ],
            itemStyle: {
              color: function (params) {
                //自定义颜色
                var colorList = [
                  '#00ff9c', '#dfdfdf', '#FCCE10', '#E87C25', '#27727B',
                  '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                  '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                ];
                return colorList[params.dataIndex]
              }

            }
          }]
        });
      },
      drawvertical() {
        console.log(this.device_mylist)
        this.vertical = echarts.init(document.getElementById("vertical"));
        this.vertical.setOption({
          grid: {
            x: '10%',
            y: '19%',
            height: '60%'
          },

          tooltip: {
            position: 'right',
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },

          series: [{
            name: "设备在线数统计",
            type: "pie",
            radius: ["50%", "85%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              color: function (params) {
                //自定义颜色
                var colorList = [
                  '#00ff9c', '#dfdfdf', '#FCCE10', '#E87C25', '#27727B',
                  '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                  '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                ];
                return colorList[params.dataIndex]
              }

            },
            data: [
              // {
              //   value: this.users.length,
              //   show:false,
              //   name: "设备总数"
              // },
              {
                value: this.device_mylist.onlineCount,
                name: "在线设备"
              },
              {
                value: this.device_mylist.offlineCount,
                name: "离线设备"
              }
            ]
          }]
        });
      },
      drawColumnChart3() {


        this.chartColumn3 = echarts.init(document.getElementById("chartColumn3"));
        this.chartColumn3.setOption({
          legend: {
            data: this.guilname,
            textStyle: {
              color: '#bedbf9'
            },
            left: '20%'
          },
          grid: {
            x: '15%',
            y: '20%',
            height: '70%'
          },
          tooltip: {
            trigger: 'axis',

          },


          xAxis: {
            axisLabel: {
              formatter: function (value, index) {
                // 格式化成月/日，只在第一个刻度显示年份
                var date = new Date(value);
                var texts = [date.getFullYear(), (date.getMonth() + 1)];
                if (index === 0) {
                  texts.unshift(date.getYear());
                }
                return texts.join('-');
              }
            },
            splitLine: {
              show: false
            },

            type: 'time',
            name: '时间',

            axisLine: {
              lineStyle: {

                color: '#bedbf9'
              }
            }
          },

          yAxis: {
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value} %'
            },
            name: '增长率',
            nameTextStyle: {
              align: 'left'
            },
            type: 'value',
            axisLine: {
              lineStyle: {

                color: '#bedbf9'
              }
            },


          },
          series: this.guildnew
        });

      },

      drawColumnChart2() {


        this.chartColumn2 = echarts.init(document.getElementById("chartColumn2"));
        this.chartColumn2.setOption({
          legend: {
            data: this.areaname,
            textStyle: {
              color: '#bedbf9'
            },

            left: '20%'
          },
          grid: {
            x: '15%',
            y: '19%',
            height: '70%'
          },
          tooltip: {
            trigger: 'axis',

          },


          xAxis: {
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: function (value, index) {
                // 格式化成月/日，只在第一个刻度显示年份
                var date = new Date(value);
                var texts = [date.getFullYear(), (date.getMonth() + 1)];
                if (index === 0) {
                  texts.unshift(date.getYear());
                }
                return texts.join('-');
              }
            },
            type: 'time',
            name: '时间',

            axisLine: {
              lineStyle: {

                color: '#bedbf9'
              }
            }
          },

          yAxis: {
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value} %'
            },
            name: '增长率',
            type: 'value',
            axisLine: {
              lineStyle: {

                color: '#bedbf9'
              }
            },


          },
          series: this.areanew
        });

      },
      drawColumnChart1() {


        this.chartColumn1 = echarts.init(document.getElementById("chartColumn1"));
        this.chartColumn1.setOption({
          grid: {
            x: '10%',
            y: '19%',
            height: '60%',
            width: '75%'
          },
          tooltip: {
            trigger: 'axis',

          },


          xAxis: {
            splitLine: {
              show: false
            },

            type: 'time',
            name: '时间',

            axisLine: {
              lineStyle: {

                color: '#bedbf9'
              }
            }
          },

          yAxis: {
            splitLine: {
              show: false
            },

            name: '设备数',
            type: 'value',
            axisLine: {
              lineStyle: {

                color: '#bedbf9'
              }
            },


          },
          series: [{

            itemStyle: {
              normal: {
                color: '#bedbf9'
              }
            },
            name: "在线设备",
            type: "line",
            data: this.dailyitem,

          }]
        });

      },
      drawColumnChart() {

        this.chartColumn = echarts.init(document.getElementById("chartColumn"));
        this.chartColumn.setOption({
          grid: {
            x: '10%',
            y: '19%',
            height: '60%',
            width: '75%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },

          toolbox: {

            show: true,
            iconStyle: {
              color: '#fff'
            },
            feature: {


            }
          },
          xAxis: {
            splitLine: {
              show: false
            },
            type: 'time',
            name: '时间',

            boundaryGap: true,
            data: [],
            axisLabel: {
              color: '#fff',
            },
            axisLine: {
              lineStyle: {

                color: '#bedbf9'
              }
            }
          },

          yAxis: {
            splitLine: {
              show: false
            },
            name: '设备数',
            type: 'value',
            axisLine: {
              lineStyle: {

                color: '#bedbf9'
              }
            },

            axisLabel: {
              color: '#fff'
            }
          },
          series: [

            {

              itemStyle: {
                normal: {
                  color: '#bedbf9'
                }
              },
              name: "新增设备",
              type: "line",
              data: this.device_new_uplist,

            }
          ]
        });
      },

      drawCharts() {
        this.drawColumnChart();
      },
      alarmget1() {
        let parse = {
          type: 1,
          state: 0,
          pageNo: 1,
          pageSize: 200,
          deviceUserId: this.userId,
          companyId: this.companyId
        }
        alarm_log_queryDevice(parse).then((res) => {
          console.log('告警数:'+res.data.list)
          console.log(res.data.list)
          this.eventlist = res.data.list;
          
            this.map2();

        });
      },
      publicmy() {
        device_my().then((res) => {
          this.device_mylist = res.data;
          if (this.device_mylist.totalCount) {
            this.pertop = (this.device_mylist.onlineCount * 100 / this.device_mylist.totalCount).toFixed(2);
            this.perbottom = (this.device_mylist.offlineCount * 100 / this.device_mylist.totalCount).toFixed(2);
          }
          this.drawvertical();
        });
      },
      alarmget() {
        let parse = {
          // type: 1,
          pageNo: 1,
          pageSize: 50,
          level: this.level,
          deviceId: this.deviceId,

          state: 0,
        }
        let parse2 = {
          type: 2,
          pageNo: 1,
          pageSize: 50,
          state: 0,
        }
        let para1 = {
          type: 1,
          deviceId: this.deviceId,
          pageNo: 1,
          state: 0,
          pageSize: 200,
          startTime: this.filters.startTime,
          endTime: this.filters.endTime
        };
        // alarm_log_query(para1).then((res) => {
        //   this.givelistdis = res.data.list;
        //   console.log(this.givelist)
        //   for (let i in res.data.list) {
        //     if (this.givelistdis[i].state == 0) {
        //       this.givelistdis[i].state = '未处理';
        //     } else if (this.givelistdis[i].state == 1) {

        //       this.givelistdis[i].state = '已处理';
        //     } else {

        //       this.givelistdis[i].state = '误报';
        //     }
        //   }
        // });
        alarm_log_query(parse).then((res) => {
          this.givelist = res.data.list;
          console.log(this.givelist)
          for (let i in res.data.list) {
            if (this.givelist[i].state == 0) {
              this.givelist[i].state = '未处理';
            } else if (this.givelist[i].state == 1) {

              this.givelist[i].state = '已处理';
            } else {

              this.givelist[i].state = '误报';
            }
          }
        });
        // alarm_log_query(parse2).then((res) => {
        //   this.givelist2 = res.data.list;
        //   console.log(this.givelist)
        //   for (let i in res.data.list) {
        //     if (this.givelist2[i].state == 0) {
        //       this.givelist2[i].state = '未处理';
        //     } else if (this.givelist2[i].state == 1) {

        //       this.givelist2[i].state = '已处理';
        //     } else {

        //       this.givelist2[i].state = '误报';
        //     }
        //   }
        // });
        // alarm_log_countLevel().then((res) => {
        //   this.alarm_count1 = res.data;
        //   console.log(res)
        //   this.drawvertical2();
        // })
        // alarm_log_count().then((res) => {
        //   this.alarm_count = res.data;

        //   this.drawvertical1();
        // })
      },
      tempChange(){
          console.log(this.templateId);
            let para = {
          pageNo: 1,
          pageSize: 9999,
        name:this.deviceName,
        deviceSn:this.deviceSn,
          deviceTemplateId: this.templateId,//设备配方
         
        };
        //NProgress.start();
        device_query(para).then(res => {
            this.users=res.data.list;
            if(!this.deviceId){
                // this.deviceId=res.data.list[0].deviceId;
                this.deviceitem(res.data.list[0])
            }
          //NProgress.done();
        });

      }
    },

    mounted: function () {
      let _this = this;
    
    
      let para = {
        pageNo: 1,
        pageSize: 9999,
      
      }
        device_template_query(para).then(res => {
            
        this.begCode(res.code, res.message);
      console.log(res);
      this.templateList=res.data.list;
      this.templateId=res.data.list[0].id;
      this.tempChange();
      
      //NProgress.done();
    });

      this.usertype = JSON.parse(sessionStorage.getItem('user')).type;
     let para2 = {
        name: 'alarmLevel',
        pageSize: 999,
        pageNo: 1,
      }

      dict_query(para2).then((res) => {
        this.begCode(res.code, res.message);
        if (res.code == 0) {
          this.alaem_grade = res.data.list;
          this.alaem_grade.splice(0, 1);
        }

      });
      this.t=setInterval(()=>{
        this.handleSave1();
      },3000)
    //   user_querycompany(parauser).then((res) => {

    //     this.begCode(res.code, res.message);
    //     this.firmlist = res.data.list;


    //   });
    
   
  
    

    

    },
    destroyed: function () {
      console.log('退出')
      clearInterval(this.t)
    },
    updated: function () {

    }
  };
</script>
<style lang="scss">
  @import "~scss_vars";

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
  .hdpi{
    
    height: 100%;
  }
  .hdpi-c {
    margin: 0 35px;
    /* padding-bottom: 20PX; */

    .hdpi-txt-l {
      float: left;
      width: 40%;
      display: inline-block;
    }

    .hdpi-txt-l img {
      width: 128px !important;
      height: 100px;
      display: block;
      margin: 0 auto;
    }

    .hdpi-txt-c {
      float: left;
      width: 54%;
      height: 100px;
      display: inline-block;
      overflow-y: scroll;

      li {
        display: inline-block;

        width: 49%;
        min-width: 40%;
        /* margin-right: 20px; */
        float: left;
      }
    }

    .hdpi-txt-r {
      float: left;
      /* height: 200px; */
      width: 60%;
      display: inline-block;

      li {

        text-align: right;
        /* float: left; */
        display: block;
        /* width: 49%; */
        margin-top: 10px
      }
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    /* background: #99a9bf; */
  }

  .grid-bg {
    border-radius: 6px;
    /* border: solid 1px #1adedd; */
    background-image: url(../../assets/01.png);

    background-position: top, bottom;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* box-shadow: 0px 7px 20px 8px rgba(26, 222, 221, 0.2); */
    border-radius: 6px;
    border-radius: 6px;
    /* margin-bottom: 10px; */
  }

  .bg-purple {
    background: #2d476e;
  }

  .bg-purple-light {
    /* background: #e5e9f2; */
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    height: 100%;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  #allmap,
  #allmap1,
  #allmap2 {
    height: 660px;
    width: 100%;
    overflow: hidden;
    /* z-index: auto !important; */
  }

  /* #allmap>div,
  #allmap1>div,
  #allmap2>div{
    
    z-index: auto !important;
  } 
  .el-tabs__nav{
    z-index:10;
  } */
  .hdpi-r-l {
    display: inline-block;
    text-align: left;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 23px;
    /* width: 60%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; */
  }

  .hdpi-r-r {
    text-align: right;
    display: inline-block;
    width: 40%;
  }

  .hdpi-r-ul {
    color: #e5e5e5;
    line-height: 1.3;
    font-size: 12px;
    height: 95%;
    overflow-y: scroll;
    padding: 5px;
  }

  .hdpi-r-ul li {
    font-size: 14px;
    cursor: pointer;
    margin: 0 3px;
    padding: 4px 0 3px;
    border-bottom: 1px dashed #e5e5e5;
  }

  .hdpi-txt-c li>div {
    font-size: 12px;
    line-height: 2;
    color: #fff;
  }

  .hdpi-txt-c li {
    margin-bottom: 5px;
  }

  .container .main .content-container {}

  .hdpi-icons {
    min-height: 200px;
    // padding: 3% 0 0 0;
    position: absolute;
    background-color: #1a3257;
    background-size: 100% 100%;
    background-image: url(../../assets/02.png);
    background-position: center;
    z-index: 20;
    margin-top: 1%;
    width: 100%;
    bottom: 0;
  }

  .icon-left {
    position: absolute;
    left: 30px;
    top: 38%;
    font-size: 72px;
    cursor: pointer;
    color: #6ac2eb;
  }

  .icon-right {
    cursor: pointer;
    position: absolute;
    right: 30px;

    font-size: 72px;
    top: 38%;
    cursor: pointer;
    color: #6ac2eb;
  }

  .hdpi-txt-c::-webkit-scrollbar {
    display: none;
  }

  /* .hdpi-r-ul::-webkit-scrollbar {
    display: none;
  } */
  .hdpi-r-ul::-webkit-scrollbar-track-piece {
    //滚动条凹槽的颜色，还可以设置边框属性
    background-color: #1a3257;
  }

  .hdpi-r-ul::-webkit-scrollbar {
    //滚动条的宽度
    width: 9px;
    height: 9px;
  }

  .hdpi-r-ul::-webkit-scrollbar-thumb {
    //滚动条的设置
    background-color: #dddddd;
    background-clip: padding-box;
    min-height: 28px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #1a3257;
  }

  .el-dialog__wrapper {
    /* opacity: .5; */
    background: rgba(0, 0, 0, .5);
  }

  .customWidth {
    width: 80%;
  }

  .hdpi-map {
    position: relative;
    /* height: 850px; */
  }

  .icon-clear {
    position: absolute;
    right: 30px;
    top: 30px;
    cursor: pointer;
    font-size: 12px;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0
  }

  .container .main .content-container {
    padding: 0 20px;
  }

  .container .main .content-container .content-wrapper[data-v-e32521f6] {
    /* background-color: #1a3257; */

    background: url(../../assets/00.jpg);
    background-size: 100% 100%;
    background-position: top, bottom;
    box-sizing: border-box;
    background-repeat: no-repeat;

  }

  .hdpi .device_item {
    width: 40%;
    padding-top: 0px;
  }

  .hdpi .device_item_list {
    color: #fff;
    width: 100%;
    margin-bottom: 5px;
  }

  .device_item_list span {
    display: inline-block;
    text-indent: 10px;
    font-size: 12px;
  }

  .grid-back {
    position: relative;
    background-size: 100%;
    // padding: 1%;
    min-height: 300px;
    background-position: top, bottom;
    /* background-image: url(../../assets/img/figure2.png), url(../../assets/img/figure1.png); */
    background-image: url(../../assets/01.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .grid-back-title {
    text-align: center;
  }

  /* .grid-back-circle {
    position: absolute;
    background: #1F5C81;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    min-width: 40px;
  } */
  .grid-back-circle {
    color: #fff;
    margin-bottom: 3px;
  }

  .circle-count {
    color: #D97819;
    line-height: 14px;
    width: 10%;
  }

  .circle-title {
    width: 20%;
    display: inline-block;
    padding-left: 10px;
  }

  .grid-back-circle1 {

    background: #2C6ECC;
    padding: 30px;
    bottom: 20px;

    left: 32%;
  }

  .grid-back-circle2 {
    background: #83C34B;

    padding: 25px;
    top: 30px;
    right: 22px;
  }

  .grid-back-circle3 {
    background: #D97819;

    padding: 20px;
    top: 30px;
    left: 22px;
  }

  .grid-back-circle4 {
    background: #2797BE;

    padding: 19px;
    left: 35%;
    top: 40px;
  }

  .grid-back-circle5 {
    background: #7E63B7;

    padding: 16px;
    bottom: 20px;
    left: 22px;
  }

  .grid-back-circle6 {
    background: #26B470;

    padding: 15px;
    bottom: 40px;
    right: 20px;
  }

  .grid-back-circle7 {
    /* background: #8750E5; */
    height: 70px;
    width: 70px;
    line-height: 70px;
    top: 40px;
    left: 12px;
  }

  .grid-back-circle8 {
    /* background: #8750E5; */
    height: 65px;
    width: 65px;
    line-height: 65px;
    top: 20px;
    right: 12px;
  }

  .hdpi-txt-title {
    /* text-indent: 50px; */
    text-align: center;
    color: #fff;
    float: left;
    width: 40%;

  }

  .hdpi-txt-r li {
    float: left;
    margin-right: 20px
  }

  .hdpi-txt-r li div {
    cursor: pointer;
    /* width: 120px; */
    padding: 0 10px;
    height: 40px;
    background-color: #3c8dbc;
    border-radius: 4px;
    color: #ffffff;
    text-align: center;
    line-height: 40px;
    margin: 0 auto;
  }

  .hdpi .el-tabs--border-card {
    background: #1a3257;
    border: 0;
    box-shadow: 0 0 0 0;
  }

  .el-tabs--border-card>.el-tabs__content {
    padding: 0;
  }

  .el-tabs--border-card>div {

    padding: 0
  }

  .el-tabs__content {
    padding: 0
  }

  .hepi .el-tabs--border-card>.el-tabs__header {
    background-color: #1a3257 !important;
    border-bottom: 0px solid #e4e7ed !important;
    margin: 0;
  }

  .hdpi .el-tabs--border-card>.el-tabs__header .el-tabs__item {
    background-color: #2d476e;
    box-shadow: 0px 7px 20px 0px rgba(0, 0, 0, 0.2);
    color: #fff;
    border-radius: 6px 0px 0px 0px;
  }

  .hdpi .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: #294e88;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.33);
    color: #fff;
    border-radius: 4px 4px 0px 0px;
    border: 0;
  }

  .gdit-time {
    /* position: absolute; */
    left: 290px;
    top: 0;
    z-index: 20;
    margin: 5px 0;
  }

  .el-col,
  section {
    border-radius: 0 !important;
  }

  .forlist {
    margin: 0 auto;
    display: inline-block;
    width: 100%;
  }

  .forlist>div {
    float: left;
    width: 25%;
    padding: 15px 0 10px;
    display: inline-block;
    /* padding: 0; */
    min-height: 130px;
    text-indent: 10px;
  }

  .el-progress-bar__innerText {
    color: #000;
  }

  /* .el-input size="mini1" .el-input__inner {
    height: 30px;
  }

  .el-input__icon {
    line-height: 30px;
  } */
  /* @media only screen and (max-width: 1299px){
.hidden-md-and-down {
    display: none!important;
}
.mapcontent{
  width: 100%
}
} */
.mapcontent{
  height: 100%;
}
.hidden-md-and-down{
  height: 100%;
}
  .hdpi-map .el-tabs--border-card>.el-tabs__header {
    /* position: absolute; */
    background-color: #1a3257 !important; 
    border-bottom: 0px solid #e4e7ed !important;
    margin: 0;
  }
  .hdpi-map .el-button--primary{
    /* height: auto; */
  }
  .BMap_pop {
    margin-top: -15px;
  }
  .anchorBL{display:none}
  .BMap_bubble_title{
    white-space: inherit !important;
    line-height: 20px !important;
  }
    .leftbool-left{
    width: 30px;
    height: 30px;
    transform:translateY(-12px);
    background: url("../../assets/left-shrink.png");
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .leftbool-right{
    width: 30px;
    height: 30px;
    transform:translateY(-12px);
    background: url("../../assets/right-shrink.png");
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .rightbool-left{
    width: 30px;
    height: 30px;
    transform:translateY(-12px);
    background: url("../../assets/right-shrink.png");
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .rightbool-right{
    width: 30px;
    height: 30px;
    transform:translateY(-12px);
    background: url("../../assets/left-shrink.png");
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .block{
        position: absolute;
    right: 100px;
    bottom: 20px;
    width: 200px;
    z-index: 10002;
  }
</style>